{% extends 'base.html' %}
{% load static %}

{% block title %}库存分析{% endblock %}

{% block extra_css %}
<style>
    .stats-card {
        border-left: 4px solid #007bff;
        transition: transform 0.2s;
    }
    .stats-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .stats-number {
        font-size: 2rem;
        font-weight: bold;
    }
    .stats-label {
        color: #6c757d;
        font-size: 0.9rem;
    }
    .filter-section {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .table-responsive {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .progress-thin {
        height: 6px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-warehouse me-2"></i>库存分析</h2>
                <div class="btn-group">
                    <a href="{% url 'assets:analytics_dashboard' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-tachometer-alt me-1"></i>返回仪表板
                    </a>
                    <a href="{% url 'assets:export_analytics_data' %}?type=inventory" class="btn btn-success">
                        <i class="fas fa-file-excel me-1"></i>导出数据
                    </a>
                </div>
            </div>

            <!-- 筛选区域 -->
            <div class="filter-section">
                <form method="get" class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">时间范围</label>
                        <select name="date_range" class="form-select">
                            {% for value, label in date_range_options %}
                                <option value="{{ value }}" {% if value == selected_date_range %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">仓库</label>
                        <select name="warehouse" class="form-select">
                            <option value="">全部仓库</option>
                            {% for warehouse in warehouses %}
                                <option value="{{ warehouse.id }}" {% if warehouse.id|stringformat:"s" == selected_warehouse %}selected{% endif %}>{{ warehouse.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">类别</label>
                        <select name="category" class="form-select">
                            <option value="">全部类别</option>
                            {% for category in categories %}
                                <option value="{{ category.id }}" {% if category.id|stringformat:"s" == selected_category %}selected{% endif %}>{{ category.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">&nbsp;</label>
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-filter me-1"></i>筛选
                        </button>
                    </div>
                </form>
            </div>

            <!-- 统计卡片 -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card stats-card h-100">
                        <div class="card-body text-center">
                            <div class="stats-number text-primary">{{ total_consumables }}</div>
                            <div class="stats-label">耗材种类</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card stats-card h-100">
                        <div class="card-body text-center">
                            <div class="stats-number text-success">¥{{ total_value|floatformat:2 }}</div>
                            <div class="stats-label">库存总价值</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card stats-card h-100">
                        <div class="card-body text-center">
                            <div class="stats-number text-warning">{{ low_stock }}</div>
                            <div class="stats-label">低库存预警</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card stats-card h-100">
                        <div class="card-body text-center">
                            <div class="stats-number text-danger">{{ out_of_stock }}</div>
                            <div class="stats-label">缺货状态</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 库存状态分布 -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-chart-pie me-2"></i>库存状态分布</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="d-flex justify-content-between align-items-center p-2 bg-light rounded mb-2">
                                        <span>正常库存</span>
                                        <span class="badge bg-success">{{ normal_stock }}</span>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="d-flex justify-content-between align-items-center p-2 bg-light rounded mb-2">
                                        <span>低库存预警</span>
                                        <span class="badge bg-warning">{{ low_stock }}</span>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="d-flex justify-content-between align-items-center p-2 bg-light rounded mb-2">
                                        <span>缺货状态</span>
                                        <span class="badge bg-danger">{{ out_of_stock }}</span>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="d-flex justify-content-between align-items-center p-2 bg-light rounded mb-2">
                                        <span>总计</span>
                                        <span class="badge bg-primary">{{ normal_stock|add:low_stock|add:out_of_stock }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 详细统计表格 -->
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-warehouse me-2"></i>仓库统计</h5>
                        </div>
                        <div class="card-body p-0">
                            {% if warehouse_stats %}
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>仓库名称</th>
                                            <th>耗材数量</th>
                                            <th>总库存</th>
                                            <th>库存价值</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for stat in warehouse_stats %}
                                        <tr>
                                            <td>{{ stat.warehouse__name|default:"未分配" }}</td>
                                            <td><span class="badge bg-primary">{{ stat.count }}</span></td>
                                            <td><span class="badge bg-info">{{ stat.total_quantity|floatformat:0 }}</span></td>
                                            <td><span class="text-success fw-bold">¥{{ stat.total_value|floatformat:2 }}</span></td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% else %}
                            <div class="text-center py-4">
                                <p class="text-muted">暂无仓库统计数据</p>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-tags me-2"></i>类别统计</h5>
                        </div>
                        <div class="card-body p-0">
                            {% if category_stats %}
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>类别名称</th>
                                            <th>耗材数量</th>
                                            <th>总库存</th>
                                            <th>库存价值</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for stat in category_stats %}
                                        <tr>
                                            <td>{{ stat.category__name|default:"未分类" }}</td>
                                            <td><span class="badge bg-success">{{ stat.count }}</span></td>
                                            <td><span class="badge bg-warning">{{ stat.total_quantity|floatformat:0 }}</span></td>
                                            <td><span class="text-success fw-bold">¥{{ stat.total_value|floatformat:2 }}</span></td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% else %}
                            <div class="text-center py-4">
                                <p class="text-muted">暂无类别统计数据</p>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 操作统计 -->
            {% if operation_stats %}
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-exchange-alt me-2"></i>操作统计</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                {% for stat in operation_stats %}
                                <div class="col-md-6">
                                    <div class="d-flex justify-content-between align-items-center p-3 bg-light rounded mb-2">
                                        <span>
                                            {% if stat.operation_type == 'in' %}
                                                <i class="fas fa-arrow-down text-success me-2"></i>入库操作
                                            {% else %}
                                                <i class="fas fa-arrow-up text-danger me-2"></i>出库操作
                                            {% endif %}
                                        </span>
                                        <span class="badge {% if stat.operation_type == 'in' %}bg-success{% else %}bg-danger{% endif %}">
                                            {{ stat.count }}
                                        </span>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 自动提交表单当选择框改变时
document.addEventListener('DOMContentLoaded', function() {
    const selects = document.querySelectorAll('select[name="date_range"], select[name="warehouse"], select[name="category"]');
    selects.forEach(select => {
        select.addEventListener('change', function() {
            this.form.submit();
        });
    });
});
</script>
{% endblock %}
